<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>银行卡绑定</title>
        <link rel="stylesheet" href="<c:url value="/static/wx/css/style.css"/>" />
        <script type="text/javascript" src="<c:url value="/static/wx/js/lib/rem.js"/>"></script>
	</head>
    <body class="befeff4">
        <div id="wrap">
            <div class="wrap_order pd60">
                <div class="wrap_select">
                    <div class="wrap_name common_list  mt10">
                        <div class="common boder-bottom relative">
                            <label>真实姓名</label><input id="name" type="text" placeholder="请填写真实姓名" />
                        </div>
                    </div>
                    <div class="wrap_idCard common_list">
                        <div class="common boder-bottom relative">
                            <label>身份证号</label><input id="idCard" value="" type="text" maxlength="18" placeholder="请填写身份证号" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"/>
                        </div>
                    </div>
                    <div class="wrap_idCard common_list mt10">
                        <div class="common boder-bottom relative">
                            <label>银行卡号</label><input id="bankCard" value="" type="tel" maxlength="19" placeholder="请输入银行卡号用于提现" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" />
                        </div>
                    </div>
                    <div class="common f14 c666 mt10">注：仅支持储蓄卡</div>
                    <div class="wrap_tel common_list mt10">
                        <div class="common boder-bottom relative">
                            <label>手机号</label><input type="tel" id="tel" maxlength="11" placeholder="输入手机号" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" />
                            <button class="sendcode" onclick="getCode()" id="getCodeBtn">发送验证码</button>
                        </div>
                    </div>

                    <div class="wrap_code common_list">
                        <div class="common boder-bottom relative">
                            <label>验证码</label>
                            <input id="code" type="tel" value="" placeholder="输入短信验证码" maxlength="4"  onkeyup="value=value.replace(/\D/g,'')" />
                        </div>
                    </div>
                </div>
                <div class="wrap_btn mt65">
                    <a href="javascript:void(0)" class="button" id="submit_btn">下一步</a>
                </div>
            </div>
            
            <!--设置成功提示弹窗开始-->
            <div class="msg-succ">
                <img src="<c:url value="/static/wx/img/succ_icon.png"/>" /> <span class="f20">银行卡认证成功</span> 
            </div>
            <!--设置成功提示弹窗结束-->
        </div>
        
        <input type="hidden" id="userId" value="${userVo.bId}" />
        <input type="hidden" id="payStatus" value="${userVo.payStatus}" />
        <input type="hidden" id="bankId" value="${bankcardInfoVo.id}" />
        <script type="text/javascript" src="<c:url value="/static/wx/js/lib/jquery-3.3.1.min.js"/>"></script>
        <script type="text/javascript">
            var userId = $("#userId").val();
            var bankId = $("#bankId").val();
            var payStatus = $("#payStatus").val();
            $("#submit_btn").on("click", function() {
                //联系人姓名
                var name = $("#name").val().trim();console.log(name);
                //身份证
                var idCard = $("#idCard").val().trim();
                //银行卡号
                var bankCard = $("#bankCard").val().trim();
                //联系人电话
                var tel = $("#tel").val().trim();
                //验证码
                var code = $("#code").val().trim();
                var regName =/^[\u4e00-\u9fa5]{2,4}$/;//姓名校验
				var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;//身份证校验
				var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;//手机号校验
                if (!name || !idCard || !tel || !code||!bankCard) {
                  alert("各项信息必填");
                  return false;
                } else if(!regName.test(name)){  
				    alert('真实姓名填写有误');  
				    return false;  
				 } else if (bankCard.length != 16 && bankCard.length != 17 && bankCard.length != 18 && bankCard.length != 19) {
                  alert("银行卡长度有误");
                  return false;
                } else if (idCard.length != 18) {
                  alert("身份证长度有误");
                  return false;
                } else if(!regIdNo.test(idCard)){
			     	alert("身份证号填写有误");
			      	return false;
			    }else if (!myreg.test(tel)) {
                  alert("手机号有误");
                  return false;
                } else if (code.length != 4) {
                  alert("验证码长度有误");
                  return false;
                }else{
	                 var f = arguments.callee, self = this;
	                 $(self).unbind('click', f);  
	                 $.ajax({
	                     type: "POST",
	                     url: "<c:url value="/wx/saveBank.do"/>",
	                     data: {
	                    	 id : bankId,
	                    	 userId: userId,//28444765309003157247057352550
	                         bankName: name, //所属人
	                         cardNumber: idCard,//身份证号
	                         bankCardName : bankCard,//银行卡号
	                         phone: tel,//手机号
	                         code: code,//验证码
	                     },
	                     cache: true, 
	                     async:false, 
	                     dataType: "json",
	                     success: function(data){
	                         if (data.msg == "1") {
	                             $(".msg-succ").show();
	                             setTimeout(go(userId), 3000)
	                         }else{
	                             $(self).click(f);
	                         }
	                     }
	                 });
	             }
            })
            
	        function go(userId){
            	if (payStatus == 1) {
            		 //设置密码页面
                    window.location.href = "<c:url value="/wx/toSetPassword.do"/>?id="+userId;
            	}else {
            		 //跳转到我的银行卡
                    window.location.href = "<c:url value="/wx/toMyBank.do"/>?id="+userId;
            	}
	        }
	           
	       //获取验证码
	       function getCode() {
	           var tel = $("#tel").val().trim();
	           var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
	           var c = 60;
	           if(tel == '') {
	               alert("手机号不能为空");
	               return false
	           } else if(tel.length != 11) {
	               alert("手机号长度有误");
	               return false;
	           } else if(!myreg.test(tel)) {
	               alert("手机号有误");
	               return false;
	           } else {
	               var getCodeBtn = document.getElementById("getCodeBtn");
	               getCodeBtn.disabled = true;
	               $.ajax({
	                   type: "POST",
	                   url: "<c:url value="/wx/toObtainMessage.do"/>",
	                   cache: true, 
	                   async:false, 
	                   dataType: "jsonp",
	                   jsonp:"callback",
	                   data: {
	                	   telephone:tel
	                   },
	                   success: function(res) {
	                       console.log(res);
	                       if(res.msg == "1") {
	                           alert("获取验证码成功");
	                           var getCodeBtn = document.getElementById("getCodeBtn");
	                           getCodeBtn.disabled = false;
	                           var sec = 60;
	                           getCodeBtn_.innerHTML = sec + "s";
	                           sec--;
	                           var time = window.setInterval(function() {
	                               if(sec > 0) {
	                                   getCodeBtn.innerHTML = sec + 's';
	                                   sec--;
	                               } else {
	                                   window.clearInterval(time);
	                                   getCodeBtn.disabled = true;
	                                   getCodeBtn.innerHTML = '发送验证码';
	                               }
	                           }, 1000);
	                       } else {
	                           alert(res.msg);
	                       }
	                   },
	                   error: function() {
	                       console.log("error")
	                   }
	               })
	           }
	       }
        </script>

    </body>
</html>